
<template>
  <a-input-group compact>
    <VersionTypeSelect v-model="versionType" :disabled="disabled" class="version-type-select" :append-to-body="false" v-if="!onlyVersionType" style="width: 80px;"/>
    <a-select
      show-search
      option-filter-prop="children"
      :placeholder="$t('smartDrivingDomainVersion').toLowerCase()"
      :filter-option="filterOption"
      :allow-clear="true"
      :mode="mode"
      :maxTagCount="1"
      :disabled="disabled"
      :labelInValue="labelInValue"
      v-model="selectedValue"
      style="border-radius:0 4px 4px 0;"
      :style="{width: onlyVersionType ? '100%' : 'calc(100% - 80px)'}"
    >
      <a-select-option v-for="item in options" :key="item[replaceFields.key]" :value="item[replaceFields.value]"
                       :title="getVersionTypeText(item[replaceFields.title], item.versionType, item) ">
        {{ getVersionTypeText(item[replaceFields.title], item.versionType, item) }}
      </a-select-option>
    </a-select>
  </a-input-group>
</template>
<script>
import vehicleVersionApi from '@/api/modules/software/vehicleVersion'
import VersionTypeSelect from './VersionTypeSelect'
import lodash from 'lodash'
import {mapState} from "vuex";
export default {
  components:{VersionTypeSelect},
  props: {
    defaultValue: {
      type: [Array, String, Object],
      default () {
        return []
      }
    },
    mode: {
      type: String,
      default: 'multiple'
    },
    time: {
      type: Number,
      default: 124578
    },
    disabled: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default () {
        return null
      }
    },
    /**
     * 版本下拉框默认选中
     */
    defaultVersionType:{
      type: String,
      default: ''
    },
    onlyVersionType:{
      type: String,
      default: ''
    },
    // 要替换取每个项的属性对应的key
    replaceFields: {
      type: Object,
      default () {
        return {
          key: 'id',
          value: 'id',
          title: 'name'
        }
      }
    },
    labelInValue: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // selectedValue: [],
      versionType: this.onlyVersionType || this.defaultVersionType || 'TEST',
      options: []
    }
  },
  computed: {
    selectedValue:{
      get() {
        return this.defaultValue;
      },
      set(val) {
        this.$emit('change', val);    // 触发
        let item = this.options.find(e => e.id === val);
        this.$emit('changeoption', val, item)
      }
    }
  },
  watch: {
    // defaultValue: {
    //   handler (val) {
    //     console.log(val, 'selectVehicleVersion2')
    //     if (val !== this.selectedValue) {
    //       this.selectedValue =  this.defaultValue
    //     }
    //   },
    //   immediate: true
    // },
    // selectedValue (val) {
    //   // if (lodash.isEqual(this.defaultValue, this.selectedValue)) {
    //   //   return
    //   // }
    //   let item = this.options.find(e => e.id === val);
    //   this.$emit('changeoption', val, item)
    // },
    versionType() {
      this.selectedValue = undefined
      this.getData();
    },
    time: {
      handler (val) {
        if (val === 0) {
          return
        }
        this.getData()
      },
      immediate: true
    }
  },
  model: {
    prop: "defaultValue", //绑定的值，通过父组件传递
    event: "change" //自定义事件名
  },
  created () {
    this.$store.dispatch('getVersionTypeDictCodeData')
  },
  methods: {
    getData () {
      this.options = []
      vehicleVersionApi.getVehicleVersionSelectData(this.query, this.versionType).then(res => {
        this.options = res.data
      })
    },
    getVersionTypeText(name, versionType, data) {
      let s = name;
      if (!this.query) {
        if (data && data.model) {
          s += ' 【' + data.model.code + '】';
          // s += '【' + data.model.trimLevel + '】';
        }
      } else {
        s += ' 【' +
        (this.$store.getters.getDictCodeObj('versionTypeDictCode')[versionType] || versionType)
        + '】';
      }
      return s;
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
